{extend name="public/base"}
{block name="head"}
<script src="/public/assets/js/jquery.form.js"></script>
{/block}
{block name="main"}
<div class="container" id="main">
    <div class="text-right">
        <button class="btn btn-primary btn-sm"><a href="{:url('album/create')}">创建相册</a> </button>
    </div>
    <fieldset>
    <legend>相册添加/修改</legend>
    </fieldset>
    <div>
        <form id="form_id" class="form-horizontal " enctype="multipart/form-data" >
            <div class="control-group">
                <label class="control-label" for="title">上传照片</label>
                <div class="controls">
                    <input type="file" id="img" name="file[]"  multiple="multiple" @change="upload" >
                </div>
            </div>
        </form>
    </div>
    <form class="form-horizontal " action="{:url('admin/album/save_detail')}" method="post" enctype="multipart/form-data" >
        <fieldset>
            <div class="control-group">
                <label class="control-label" for="select01">相册</label>
                <div class="controls">
                    <select id="album" name="id" :value="id" required="required">
                        {volist name='list' id='vo'}
                        <option value="{$vo.id}">{$vo.subject}</option>
                        {/volist}
                    </select>
                </div>
            </div>

            <br/>
            <div class="form-actions">
                <input type="hidden" name="ids" id ='ids' />
                <button type="submit" class="btn btn-primary">保存修改</button>
                <button type="reset" class="btn">取消</button>
            </div>
        </fieldset>
    </form>
</div>

<script>
    var data = {$id|raw};
    new Vue({
        el:'#main',
        data : data,
        methods:{
            del:function(id){
              layer.alert('are you sure?',function(){
                  var url = "./del";
                  var data = {id:id};
                    ajax(url,data,'get',function(e){if(e.status == 1) window.location.reload();});
              })
            },
            upload:function(){
                var url = '{:url("album/uploads")}';
                var option = {
                    url : url,
                    type : 'POST',
                    dataType : 'json',
                    headers : {"ClientCallMode" : "ajax"}, //添加请求头部
                    success : function(e) {
                        if(e.status == 1){
                            $('#ids').val(e.data.ids);
                        }
                    }
                };
                $("#form_id").ajaxSubmit(option);
                return false; //最好返回false，因为如果按钮类型是submit,则表单自己又会提交一次;返回false阻止表单再次
            }
        }
    })

</script>

{/block}

